<template>
  <div class="all">
      <div class="top">
          <el-row :gutter="30">
              <el-col :span="8">
                  <el-form>
                      <el-form-item label="科目">
                          <el-select
                              v-model="subject"
                              placeholder="请选择试卷科目"
                              style="width: 70%;"
                              @change="fetchUnits"
                          >
                              <el-option
                                  v-for="item in typeOptions"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                              ></el-option>
                          </el-select>
                      </el-form-item>
                  </el-form>
              </el-col>
              <el-col :span="8">
                  <el-form>
                      <el-form-item label="单元号">
                          <el-select v-model="course" placeholder="请选择单元号" style="width: 70%;">
                              <el-option
                                  v-for="item in unitOptions"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                              ></el-option>
                          </el-select>
                      </el-form-item>
                  </el-form>
              </el-col>
              <el-col :span="8">
                  <el-form>
                      <el-form-item>
                          <el-button type="primary" @click="getInfo1()">立即查询</el-button>
                          <el-button type="text" @click="add()">新增</el-button>
                      </el-form-item>
                  </el-form>
              </el-col>
          </el-row>
      </div>
      <div class="list-container">
          <div class="list" v-for="(item, index) in pagination.records" :key="index">
              <div
                  class="main"
                  style="text-align: center;"
              >{{ item.main }}</div>
              <div class="use" >
              <el-button @click="edit(item)" type="primary" size="small">编辑</el-button>
              <el-button @click="del(item.id)" type="primary" size="small">删除</el-button>
          </div>
          </div>
         
      </div>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          :page-sizes="[4, 8, 10, 20]"
          :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          class="page"
      ></el-pagination>
      <el-dialog
          title="添加知识点"
          :visible.sync="dialogVisible1"
          width="30%"
          :before-close="handleClose"
      >
          <section class="update">
              <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="科目名称">
                      <el-input v-model="subject" readonly></el-input>
                  </el-form-item>
                  <el-form-item label="课程号">
                      <el-input v-model="course" readonly></el-input>
                  </el-form-item>
                  <el-form-item label="知识点详情">
                      <el-input type="textarea" v-model="main" ></el-input>
                  </el-form-item>
              </el-form>
          </section>
          
          <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="onsubmit1()">确 定</el-button>
              <el-button @click="dialogVisible1 = false">取 消</el-button>
          </span>
      </el-dialog>
      <el-dialog
          title="编辑知识点"
          :visible.sync="dialogVisible2"
          width="30%"
          :before-close="handleClose"
      >
          <section class="update">
              <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="科目名称">
                      <el-input v-model="subject" readonly></el-input>
                  </el-form-item>
                  <el-form-item label="课程号" >
                      <el-input v-model="course" readonly></el-input>
                  </el-form-item>
                  <el-form-item label="知识点详情">
                      <el-input type="textarea" v-model="main" ></el-input>
                  </el-form-item>
              </el-form>
          </section>
          
          <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="onsubmit2()">确 定</el-button>
              <el-button @click="dialogVisible2 = false">取 消</el-button>
          </span>
      </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
      return {
          // showUse: false,
          selectedItem: null,
          unitData: {
              his: [
                  { value: "1", label: "第一课" },
                  { value: "2", label: "" },
                  { value: "3", label: "" },
                  { value: "4", label: "" },
                  { value: "5", label: "" },
                  { value: "6", label: "" },
                  { value: "7", label: "" },
                  { value: "8", label: "" },
                  { value: "9", label: "" },
                  { value: "10", label: "" },
                  { value: "11", label: "" },
                  { value: "12", label: "" },
                  { value: "13", label: "" },
                  { value: "14", label: "" },
                  { value: "15", label: "" },
                  { value: "16", label: "" },
                  { value: "17", label: "" },
                  { value: "18", label: "" },
                  { value: "19", label: "" },
                  { value: "20", label: "" },
                  { value: "21", label: "" },
                  { value: "22", label: "" },
                  { value: "23", label: "" },
                  { value: "24", label: "" },
                  { value: "25", label: "" },
                  { value: "26", label: "" },
                  { value: "27", label: "" },
                  { value: "28", label: "" },
                  { value: "29", label: "" },
                  { value: "30", label: "" },
              ],
              geo: [
                  { label: "第A单元", value: "unitA" },
                  { label: "第B单元", value: "unitB" },
              ],
              pol: [
                  { label: "第X单元", value: "unitX" },
                  { label: "第Y单元", value: "unitY" },
              ],
          },
          form: {},
          dialogVisible1: false,
          dialogVisible2: false,
          course: "",
          subject: "",
          typeOptions: [
              { value: "his", label: "历史" },
              { value: "geo", label: "地理" },
              { value: "pol", label: "政治" },
          ],
          unitOptions: [],
          pagination: {
              //分页后的考试信息
              current: 1, //当前页
              total: null, //记录条数
              size: 4, //每页条数
          },
          main: "",
      };
  },
  created() {
      this.getInfo();
  },
  methods: {
      fetchUnits() {
          // 根据当前试卷类型更新单元号选项
          this.unitOptions = this.unitData[this.subject];
          this.course = ""; // 清空已选单元号
      },
      getInfo1() {
          console.log(this.pagination.current, this.subject, this.course);
          //分页查询所有试卷信息
          this.$axios(
              `/api/Shi/${this.pagination.current}/${this.pagination.size}/${this.subject}/${this.course}`
          )
              .then((res) => {
                  this.pagination = res.data.data;
                  console.log(this.pagination.records);
              })
              .catch((error) => {});
      },
      getInfo() {
          //分页查询所有试卷信息
          this.$axios(
              `/api/Shi/${this.pagination.current}/${this.pagination.size}`
          )
              .then((res) => {
                  this.pagination = res.data.data;
              })
              .catch((error) => {});
      },
      handleSizeChange(val) {
          this.pagination.size = val;
          this.getInfo();
      },
      //改变当前页码，重新发送请求
      handleCurrentChange(val) {
          this.pagination.current = val;
          this.getInfo();
      },
      add() {
          this.dialogVisible1 = true;
      },
      //编辑知识点
      onsubmit2() {
          this.dialogVisible2 = false;
          this.form.id = this.selectedItem.id
          this.form.subject = this.selectedItem.subject
          this.form.course = this.selectedItem.course
          this.form.main = this.main
          console.log(this.form)
          this.$axios({
              url: "/api/Shi",
              method: "put",
              data: {
                  ...this.form,
              },
          }).then((res) => {
              if (res.data.code == 200) {
                  this.$message({
                      //成功修改提示
                      message: "更新成功",
                      type: "success",
                  });
              }
          });
          this.subject=null;
          this.course=null;
          this.main=null;
      },
      onsubmit1() {
          this.dialogVisible1 = false;
          this.form.subject = this.subject;
          this.form.course = this.course;
          this.form.main = this.main;
          this.form.id =null;
          console.log(this.form)
          this.$axios({
              url: "/api/Shi",
              method: "post",
              data: {
                  ...this.form,
              },
          }).then((res) => {
              if (res.data.code == 200) {
                  this.$message({
                      //成功修改提示
                      message: "更新成功",
                      type: "success",
                  });
              }
          });
          this.subject=null;
          this.course=null;
          this.main=null;
          this.getInfo()
      },
      handleClose(done) {
          //关闭提醒
          this.$confirm("确认关闭？")
              .then((_) => {
                  done();
              })
              .catch((_) => {});
      },
      edit(item){
          this.selectedItem = item;
          this.dialogVisible2 = true;
          this.subject = item.subject;
          this.course = item.course;
          this.main = item.main;

      },
      del(id) {
          this.$confirm("确定删除该记录吗,该操作不可逆！！！", "删除提示", {
              confirmButtonText: "确定删除",
              cancelButtonText: "算了,留着",
              type: "danger",
          })
              .then(() => {
                  //确认删除
                  this.$axios({
                      url: `/api/Shi/${id}`,
                      method: "delete",
                  }).then((res) => {
                      this.getInfo();
                  });
              })
              .catch(() => {});
      },
      // selectItem(item) {
      //     this.selectedItem = item;
      //     this.showUse = true; // 点击后显示 use
      // },
  },
  // watch: {
  //     /**
  //      * 监听试卷类型的变化
  //      */
  //     type(newType) {
  //         if (newType) {
  //             this.fetchUnits(); // 加载对应的单元号
  //         } else {
  //             this.unitOptions = []; // 如果试卷类型为空，清空单元号选项
  //             this.selectedUnit = "";
  //         }
  //     },
  // },
};
</script>

<style scoped>  
.all {
  margin-left: 40px;
}
.list {
  margin: 10px;
  border: 1px solid #ccc; /* 边框 */
  padding: 10px; /* 内边距 */
  background-color: #bad7e9; /* 背景颜色 */
  border-radius: 5px; /* 圆角 */
}

/* zhi 元素的样式 */
.main {
  margin: 10px 0; /* 上下间距 */
  padding: 10px; /* 内边距 */
  text-align: center;
  border: 2px solid #1f83e0; /* 边框 */
  background-color: #fff; /* 背景颜色 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  border-radius: 3px; /* 圆角 */
}

/* use 元素的样式 */
.use {
  margin-top: 15px; /* 与 zhi 的上下间距 */
  text-align: center;
}
.page {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* .knowledge-page {
  font-family: Arial, sans-serif;
  padding: 20px;
}

.input-section {
  margin-bottom: 20px;
}

.input-section label {
  margin-right: 10px;
}

.input-section input {
  width: 100px;
  padding: 5px;
  margin-right: 10px;
}

.editor-section textarea {
  width: 100%;
  height: 100px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.list-section ul {
  list-style-type: none;
  padding: 0;
}

.list-section li {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list-section button {
  margin-left: 10px;
  padding: 5px 10px;
  cursor: pointer;
} */
</style>